<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getScheme() + "://" +
            request.getServerName() + ":" + request.getServerPort() +
            request.getContextPath() + "/";
%>
<html>
<head>
    <title>个人中心</title>
    <base href="<%=basePath%>" />
    <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
    <link rel="stylesheet" href="css/table.css">
    <script type="text/javascript">
    </script>
    <style>
        .ding{
            top: 0px;
            left: 0Px;
            width: 100%;
            height: 60Px;
            position: fixed;
            background-color:white;
            border-width: 0 0 2px 0;
            border-style: solid;
            border-color: LightGrey;
        }
        .dingmsg{
            float: left;
            /* width: 60Px;
            height: 40Px; */
            margin-right:20px;
            margin-top:5px;
        }
        .cebian{
            top: 62Px;
            left: 0Px;
            width: 180px;
            height: 100%;
            position: fixed;
            background-color:#ffffff;
            border-width: 0 2px 0 0;
            border-style: solid;
            border-color: LightGrey;
            /* overflow:scroll;侧边框 */
        }
        .cebianmsg{
            float: top;
            margin-left:0px;
            margin-top:20px;
        }
        .cebianmsg2{
            float: top;
            margin-left:0px;
            margin-top:20px;
        }
        .zhuti{
            top: 62px;
            left: 182px;
            width: 100%;
            height: 100%;
            position:fixed;
            background-color:#f5f5f5;
            /* text-align: center; */
        }
        .b{
            float:right;
            color: lightgray;
        }
        .b:hover{
            color: black;
            cursor: pointer;
        }
        .btn1{
            width: 50px;
            height: 25px;
            /* background-color: LightGrey; */
            background:transparent;
            border-radius: 8px;
            text-align: center;
            border-width:1px;
        }
        .btn2{
            /*background:transparent;	/*按钮背景透明*/
            border-width:0px;	/*边框透明*/
            width: 179px;
            height: 60px;
            background-color: white;
            /* border-radius: 8px; */
            text-align: center;
        }
        .btn2:hover{
            background-color: #eeeeee;
        }
        .btn2.active{
            background-color: #eeeeee;
        }
        .content{
            margin: 10px auto;
            display: none;
        }
        .content.show{
            display: block;
        }
        .btn3{
            /*background:transparent;	/*按钮背景透明*/
            border-width:0px;	/*边框透明*/
            width: 179px;
            height: 40px;
            background-color: #428bca;
            border-radius: 8px;
            text-align: center;
        }
        .text{
            outline:0 none;
            border-color:rgba(82,168,236,0.8);
            box-shadow:inset 0 1px 3px rgba(0,0,0,0.1),0 0 8px rgba(82,168,236,0.6);
            width: 470px;
            height: 495px;
        }
        .alert-box {
            display:table;
            width:100%;
            height:100%;
            position:fixed;
            top:62px;
            bottom:0;
            left: 182px;
            right:0;
            z-index:9999;
            background-color:rgba(0, 0, 0, 0.3);
        }
        .alert {
            position:absolute;
            left: 40%;
            top: 40%;
            transform: translate(-50%,-50%);
            text-align:center;
            display:table-cell;
            vertical-align:middle;
            border: 2px solid rgb(247, 243, 243);
            background-color: white;
            height: 400px;
            width: 700px;
            border-radius: 0.5rem;
        }
        .alert-box2 {
            display:table;
            width:100%;
            height:100%;
            position:fixed;
            top:62px;
            bottom:0;
            left: 182px;
            right:0;
            z-index:9999;
            background-color:rgba(0, 0, 0, 0.3);
        }
        .alert2 {
            position:absolute;
            left: 40%;
            top: 40%;
            transform: translate(-50%,-50%);
            text-align:center;
            display:table-cell;
            vertical-align:middle;
            border: 2px solid rgb(247, 243, 243);
            background-color: white;
            height: 400px;
            width: 700px;
            border-radius: 0.5rem;
        }
        .alert-box3 {
            display:table;
            width:100%;
            height:100%;
            position:fixed;
            top:62px;
            bottom:0;
            left: 182px;
            right:0;
            z-index:9999;
            background-color:rgba(0, 0, 0, 0.3);
        }
        .alert3 {
            position:absolute;
            left: 40%;
            top: 40%;
            transform: translate(-50%,-50%);
            text-align:center;
            display:table-cell;
            vertical-align:middle;
            border: 2px solid rgb(247, 243, 243);
            background-color: white;
            height: 400px;
            width: 700px;
            border-radius: 0.5rem;
        }
        .box{
            position:absolute;
            left: 250px;
            width:496px;
            height:40px;
            border:2px solid white;
            margin:auto;
            /*此元素会作为一个表格单元格显示
                （类似 <td> 和 <th>）*/
            display: table-cell;
            /*垂直居中 */
            vertical-align: middle;
            /*水平居中*/
            text-align: center;
        }
        .input{
            float:left;
            width:400px;/*宽400*/
            height:38px;/*高38（因为文本框内外边框要占用1像素所以总体高度减2，其他盒子同理）*/
            outline:none;
            border:none;/*取消文本框内外边框*/
        }
        .btnSelect{
            float:left;
            width:96px;
            height:40px;
            color:white;
            background-color:#a28374;/*将按钮背景设置为红色，字体设置为白*/
            border:none;
            outline:none;/*取消边框和外边框将按钮边框去掉*/
        }
        img{
            width: 100px;
        }
        img:hover{
            opacity:0.7;
        }
        .img2{
            width: 65px;
        }
        .booktext{
            font-size: 20px;
            color: red;
        }
        .moaltext{
            font-size: 20px;
            color: rgb(85, 81, 81);
        }
        .jiesuan{
            position: fixed;
            bottom: 50px;
            left: 960px;
            width: 200px;
            height: 50px;
        }
    </style>
    <script type="text/javascript">
        function zzzz() {
            window.location.href = "shopping.jsp";
        }
        function llogin() {
            sessionStorage.removeItem("name");
            window.location.href =  "index.jsp";
        }
        $(function () {
            selectShoppingCartByUserName();
            $("#Uname").text(sessionStorage.getItem("name")+"");
        })
        function payment(){
            $.ajax({
                url:"user/payment.do",
                type:"post",
                dataType:"json",
                data:{},
                success:function(data){
                    if (data){
                        alert("支付成功");
                    }
                }
            })
        }
        function allCheck(node1){
            var node=document.getElementsByName("mm1");
            for (var x = 0; x < node.length; x++) {
                node[x].checked=node1.checked;
            }
            sumall();
        }
        function allCheck2(node1){
            var node=document.getElementsByName("mm2");
            for (var x = 0; x < node.length; x++) {
                node[x].checked=node1.checked;
            }
        }
        function sumall(){
            var sum=0;
            var names=document.getElementsByName("mm1");
            for(var x=0;x<names.length;x++){
                if(names[x].checked){//选中的全部加起来
                    sum=sum+parseInt(names[x].value);//将选中的值解析出来
                }
            }
            $("#zongjiage").text(sum);
        }
        function deleteshoppingcart(){
            var names=document.getElementsByName("mm1");
            var arr3 = [];
            var iiiiii = 0;
            for(var x=0;x<names.length;x++){
                if(names[x].checked){//选中的全部加起来
                    arr3[iiiiii]=names[x].id;
                    iiiiii++;
                }
            }
            $.ajax({
                url:"user/deleteshoppingcart.do",
                traditional: true,
                type:"post",
                dataType:"json",
                data:{
                    "bids":arr3,
                    "name":sessionStorage.getItem("name")
                },
                success:function(data){
                    selectShoppingCartByUserName();
                }
            })
        }
        function deleteHistory(){
            var names=document.getElementsByName("mm2");
            var arr2 = [];
            var iiiiii = 0;
            for(var x=0;x<names.length;x++){
                if(names[x].checked){//选中的全部加起来
                    arr2[iiiiii]=names[x].id;
                    iiiiii++;
                }
            }
            $.ajax({
                url:"user/deleteHistoryByUnameBid.do",
                traditional: true,
                type:"post",
                dataType:"json",
                data:{
                    "bnames":arr2,
                    "name":sessionStorage.getItem("name")
                },
                success:function(data){
                    selectShoppingHistoryUserName();
                }
            })
        }
        function selectShoppingCartByUserName(){
            $.ajax({
                url:"user/selectShoppingCartByUserName.do",
                type:"post",
                dataType:"json",
                data:{
                    "name":sessionStorage.getItem("name")
                },
                success:function(data){
                    var f =0;
                    //清除旧的数据
                    $("#mytable").html("");
                    //增加新的数据
                    $("#mytable").append("<tr>");
                    $.each(data,function(i,n){
                        $("#mytable").append('<td><img onclick="picture('+n.bid+');" src="book/'+n.picture+'.png" alt="暂无图片"><br><span class="booktext">&yen;'+n.price+'</span>&emsp;<input id="'+n.bid+'" name="mm1" value="'+n.price*n.num+'" type="checkbox" onclick="sumall()"></td>');
                        f++;
                        if (f%4==0){
                            $("#mytable").append("</tr>");
                            $("#mytable").append("<tr>");
                        }
                    });
                    if (f%4!=0){
                        $("#mytable").append("</tr>");
                    }
                }
            })
        }
        function addandred(num) {
            var n3 = Number($("#shengnum").text());
            var n = Number($("#num").text());
            n+=num;
            if (n>n3||n<0){
                n-=num;
            }
            $("#num").text(n);
        }
        function updataShoppingcart() {
            $.ajax({
                url:"user/updataShoppingcartBookByBnameUname.do",
                type:"post",
                dataType:"json",
                data:{
                    "bname":$("#bname").text(),
                    "name":sessionStorage.getItem("name"),
                    "bnum":Number($("#num").text())
                },
                success:function(data){
                    $('.alert-box').hide();
                    //paymentBook();
                    selectShoppingCartByUserName();
                }
            })
        }
        function runEvery10Sec() {
            // 1000 * 6 = 6 秒钟
            var timeid = setTimeout( runEvery10Sec, 1000 * 6 );
            $.ajax({
                url:"user/payment.do",
                type:"post",
                dataType:"json",
                data:{},
                success:function(data){
                    if (data){
                        alert("支付成功！");
                        $('.alert-box2').hide();
                        $("#erweima").attr('src','images/kong.png');
                        paymentBook();
                        clearInterval(timeid);
                    }
                }
            });
        }
        function zhifu() {
            $("#erweima").attr('src','images/zhifu.png');
            runEvery10Sec();
        }
        function paymentBook(){
            var names=document.getElementsByName("mm1");
            var arr = [];
            var iiiiii = 0;
            for(var x=0;x<names.length;x++){
                if(names[x].checked){//选中的全部加起来
                    arr[iiiiii]=names[x].id;
                    iiiiii++;
                }
            }
            $.ajax({
                url:"user/paymentBookByIdUname.do",
                traditional: true,
                type:"post",
                dataType:"json",
                data:{
                    "bids":arr,
                    "name":sessionStorage.getItem("name")
                },
                success:function(data){
                    selectShoppingCartByUserName();
                }
            })
        }
        function selectShoppingHistoryUserName() {
            $.ajax({
                url:"user/selectShoppingHistoryUserName.do",
                type:"post",
                dataType:"json",
                data:{
                    "name":sessionStorage.getItem("name")
                },
                success:function(data){
                    //清除旧的数据
                    $("#mytable2").html("");
                    //增加新的数据
                    $("#mytable2").append("<caption><h2>历史</h2></caption>" +
                        "<thead>" +
                        "<tr>" +
                        "<th>书号</th>" +
                        "<th>书名</th>" +
                        "<th>数量</th>" +
                        // "<th style=\"width: 20px;\">操作</th>" +
                        "</tr>" +
                        "</thead>");
                    $.each(data,function(i,n){
                        $("#mytable2").append('<tr><td>'+n.bid+'</td><td>'+n.bname+'</td><td>'+n.num+'</td></tr>');
                    });

                }
            })
        }
        function selectEmailByName() {
            $.ajax({
                url:"user/selectEmailByName.do",
                type:"post",
                dataType:"json",
                data:{
                    "name":sessionStorage.getItem("name")
                },
                success:function(data){
                    //清除旧的数据
                    $("#mytable3").html("");
                    //增加新的数据
                    $.each(data,function(i,n){
                        $("#mytable3").append('<tr> <td>状态：'+n.title+'</td> </tr> <tr> <td>物品：'+n.text+'</td> </tr> <tr> <td>发送方：'+n.uname2+'<hr></td> </tr>');
                    });
                }
            })
        }
        function gengaixinxi() {
            var pattern = /^[^\u4e00-\u9fa5 ]{6,16}$/;
            var na = $("#newUsernae").val();
            var p1 = $("#newPwd").val()+"";
            var p2 = $("#newPwd2").val()+"";
            if (na==""){
                alert("用户名不能为空！");
            }else if (p1==""||p2==""){
                alert("密码不能为空！");
            }else if (p1!=p2){
                alert("两次密码不一致！");
            }else if (!pattern.test(p1)){
                alert("请输入不含有中文和空格，至少4位，最多16位的密码")
            }else {
                console.log(na);
                console.log(p1);
                console.log(p2);
                $.ajax({
                    url:"user/gengaixinxi.do",
                    type:"post",
                    dataType:"json",
                    data:{
                        "newname":na,
                        "name":sessionStorage.getItem("name")+"",
                        "pwd":p1
                    },
                    success:function(data){
                        sessionStorage.setItem("name",na);
                        $("#Uname").text(sessionStorage.getItem("name")+"");
                        alert("更改成功");
                        $('.alert-box3').hide();
                    }
                })
            }
        }
    </script>
</head>
<body>
<div class="ding">
    <div style="float: top;margin-left:0px;margin-top:5px;margin-left:20px;">
        <button style="background:transparent;border-width:0px;color: black" onclick="test()"><img src="images/book.png" class="img2">图书</button>
    </div>
    <div style="font-style:italic;color:white;font-size:30px;text-align: center;position:fixed;left: 500px;width: 150px;height: 60px;top: 12px;">

    </div>
    <div style="text-align: center;position:fixed;right: 10px;width: 200px;height: 60px;top: 20px;">
        <button id="gerenzhongxin" style="background:transparent;border-width:0px;color: black" onclick="zzzz()">返回首页</button>&emsp;&emsp;
        <button style="background:transparent;border-width:0px;color: black" onclick="llogin()">退出</button>
    </div>
</div>
<div class="cebian">
    <div class="cebianmsg2" style="margin-top:0px;">
        <button class="btn3">操作中心</button>
    </div>
    <div class="cebianmsg" style="margin-top:50px;">
        <button class="btn2" onclick="zzzz()">首页</button>
    </div>
    <div class="cebianmsg">
        <button class="btn2 active" id="shoppingcart">购物车</button>
    </div>
    <div class="cebianmsg" >
        <button class="btn2">购物历史记录</button>
    </div>
    <div class="cebianmsg">
        <button class="btn2" >个人中心</button>
    </div>
    <div class="cebianmsg">
        <button class="btn2">E-mail</button>
    </div>
</div>
<div class="zhuti">
    <div style="position: relative;top: 2px;left: 2px;width: 100%;height: 600px;background-color: #f5f5f5;overflow-y:auto;">
        <div class="content" style="float: top;margin-left:5px;margin-top:10px;width: 100%;height: 70px;border-bottom:1px solid #CCC;">
            <div class="box">
                <input type="text" class="input" placeholder="请输入商品" id="selectgoods1">
                <input type="button" value="搜索" class="btnSelect" id="selectbtn1" onclick="zhuan()">
            </div>
            <div style="position: relative;top: 100px;left: 100px;">
                <table style="border-spacing: 50px 30px;">
                    <tr>
                        <td><img onclick="picture('gaoshu_2021-12-30_21-51-34')" src="book/gaoshu_2021-12-30_21-51-34.png" alt="暂无图片"><br><span class="booktext">&yen;12</span></td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="content show" style="float: top;margin-left:5px;margin-top:10px;width: 100%;height: 70px;border-bottom:1px solid #CCC;">
            <div class="box">
                购物车
            </div>
            <div style="position: relative;top: 100px;left: 100px;">
                <table id="mytable" style="border-spacing: 50px 30px;">

                </table>
            </div>
            <div class="jiesuan">
                <button onclick="deleteshoppingcart()">删除</button>
                <button onclick="jiesuanNum()">结算</button>&emsp;全选<input type="checkbox" name="all" onclick="allCheck(this)">
                <br>总价格：<span id="zongjiage">0</span>&yen;
            </div>
        </div>
        <div class="content" style="float: top;margin-left:5px;margin-top:10px;width: 100%;height: 70px;border-bottom:1px solid #CCC;">
            <div class="box">
                购物历史
            </div>
            <div style="position: relative;top: 100px;left: 100px;">
                <table id="mytable2" class="table">

                </table>
            </div>
            <div class="jiesuan">
                <button onclick="deleteHistory()">删除</button>&emsp;全选<input type="checkbox" name="all2" onclick="allCheck2(this)">
            </div>
        </div>
        <div class="content" style="float: top;margin-left:5px;margin-top:10px;width: 100%;height: 70px;border-bottom:1px solid #CCC;">
            <div class="box">
                个人中心
            </div>
            <div style="position: relative;top: 100px;left: 100px;">
                <font size="4" color="black">用户名:</font>&emsp;<span id="Uname">dd</span><br><br>
                &emsp;<font size="4" color="black">密码:</font>&emsp;<span >******</span><br>
                <br><br><br><br>
                <button onclick="gengaigerenxinxi()">更改个人信息</button>
            </div>
        </div>
        <div class="content" style="float: top;margin-left:5px;margin-top:10px;width: 100%;height: 70px;border-bottom:1px solid #CCC;">
            <div class="box">
                E-mail
            </div>
            <div style="position: relative;top: 100px;left: 100px;">
                <table id="mytable3"  border="0" cellspacing="0px" cellpadding="15px" style="width: 600px;">

                </table>
            </div>
        </div>
        <div class="alert-box">
            <div class="alert">
                <div style="position:absolute;top: 0px;width: 700px;height: 50px;border-bottom:1px solid #CCC;">
                    <span class="moaltext">详细信息</span><button class="b" id="cha" style="width: 60px;height: 40px; background:transparent;border-width:0px;font-size:40px">&times;</button>
                </div>
                <div style="position:absolute;top: 51px;width: 700px;height: 295px; border-bottom:1px solid #CCC;overflow-y:auto; overflow-x:auto;">
                    <span class="moaltext">书名：</span><span id="bname" class="moaltext"></span>
                    <hr> <span class="moaltext">购买的数量：</span><span id="num" class="kucun moaltext">1</span>&emsp;&emsp;<button onclick="addandred(1)">+</button><button onclick="addandred(-1)">-</button>
                    &emsp;&emsp;&emsp;&emsp;<span class="moaltext">库存:</span><span id="shengnum" class="moaltext"></span>
                </div>
                <div style="position:absolute;bottom:0px;width: 700px;height: 50px;">
                    <button id="quxiao" style=" width: 60px;height: 35px;border-radius: 0.5rem;background:transparent;border: 1px solid #CCC;">关闭</button>&emsp;
                    <button id="baocun2" onclick="updataShoppingcart()" style="width: 90px;height: 35px;border-radius: 0.5rem;background-color: #428bca;border: 1px solid #CCC;color: #FFFFFF">保存</button>
                </div>
            </div>
        </div>
        <div class="alert-box2">
            <div class="alert2">
                <div style="position:absolute;top: 0px;width: 700px;height: 50px;border-bottom:1px solid #CCC;">
                    <span class="moaltext">结算</span><button onclick="qingchu()" class="b" id="cha2" style="width: 60px;height: 40px; background:transparent;border-width:0px;font-size:40px">&times;</button>
                </div>
                <div style="position:absolute;top: 51px;width: 700px;height: 275px; border-bottom:1px solid #CCC;overflow-y:auto; overflow-x:auto;">
                    <span style="font-size: 30px;">总价格:</span> <span id="zongjiage2" style="font-size: 30px;color: red;">5653</span>
                    <span style="font-size: 30px;color: red;">&yen;</span><br>
                    <img id="erweima" src="images/kong.png" style="width: 200px;" alt=" ">
                </div>
                <div style="position:absolute;bottom:0px;width: 700px;height: 70px;">
                    请选择支付方式:
                    <button style="background:transparent;border-width:0px;color: black" onclick="zhifu()"><img src="images/zhifubao.png" class="img2"></button>
                    <button style="background:transparent;border-width:0px;color: black" onclick="zhifu()"><img src="images/xinyongka.png" class="img2"></button>
                </div>
            </div>
        </div>
        <div class="alert-box3">
            <div class="alert3">
                <div style="position:absolute;top: 0px;width: 700px;height: 50px;border-bottom:1px solid #CCC;">
                    <span class="moaltext">个人信息</span><button class="b" id="cha3" style="width: 60px;height: 40px; background:transparent;border-width:0px;font-size:40px">&times;</button>
                </div>
                <div style="position:absolute;top: 51px;width: 700px;height: 295px; border-bottom:1px solid #CCC;overflow-y:auto; overflow-x:auto;">
                    <br> 用户名:&emsp;<input id="newUsernae" type="text"><br><br>
                    &emsp;密码:&emsp;<input id="newPwd" type="password"><br><br>
                     再次输入:&emsp;<input id="newPwd2" type="password">
                </div>
                <div style="position:absolute;bottom:0px;width: 700px;height: 50px;">
                    <button id="quxiao3" style=" width: 60px;height: 35px;border-radius: 0.5rem;background:transparent;border: 1px solid #CCC;">取消</button>&emsp;
                    <button onclick="gengaixinxi()" id="baocun" style="width: 60px;height: 35px;border-radius: 0.5rem;background-color: #428bca;border: 1px solid #CCC;color: #FFFFFF">确认</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var btns = document.getElementsByClassName("btn2")//获取内容盒子
    var contents = document.getElementsByClassName("content")
    //遍历每个按钮为其添加点击事件
    for(var i=1;i<btns.length;i++){
        btns[i].index = i;
        btns[i].onclick = function(){//对当前点击的按钮赋予active类名及显示当前按钮对应的内容
            for(var j=0;j<btns.length;j++){
                btns[j].className = btns[j].className.replace(' active', '').trim();
                contents[j].className = contents[j].className.replace(' show', '').trim();
                if (j==3) {
                    selectShoppingHistoryUserName();
                }
                if (j==4){
                    selectEmailByName();
                }
            }
            this.className = this.className + ' active';
            contents[this.index].className = contents[this.index].className + ' show';
        };
    }
    function picture2(bid){
        $.ajax({
            url:"user/selectBookById.do",
            type:"post",
            dataType:"json",
            data:{
                "bid":bid
            },
            success:function(data){
                $("#shengnum").text(data.num);
            }
        })
    }
    function picture(bid){
        $.ajax({
            url:"user/selectShoppingCartBookByBidUname.do",
            type:"post",
            dataType:"json",
            data:{
                "bid":bid,
                "name":sessionStorage.getItem("name")
            },
            success:function(data){
                $("#bname").text(data.bname);//$("#")
                $("#num").text(data.num);
                picture2(bid);
            }
        })
        $('.alert-box').fadeIn();
    }
    function jiesuanNum(){
        $('.alert-box2').fadeIn();
        $('#zongjiage2').text($('#zongjiage').text());
    }
    function gengaigerenxinxi(){
        $('.alert-box3').fadeIn();
        $("#newUsernae").val(sessionStorage.getItem("name"));
        $("#newPwd").val("******");
        $("#newPwd2").val("******");
    }
    window.onload = function(){
        document.getElementById('shoppingcart').click();
    }
    $('.alert-box').hide();
    $('.alert-box2').hide();
    $('.alert-box3').hide();
    var deng = document.getElementById("quxiao");
    deng.addEventListener('click',function(){
        $('.alert-box').fadeOut();
        // $("#shoppinghistory").click(function(){
        //     alert("你点击了按钮哦！");
        // });
    })
    var deng3 = document.getElementById("quxiao3");
    deng3.addEventListener('click',function(){
        $('.alert-box3').fadeOut();
    })
    var b = document.getElementById("cha");
    b.addEventListener('click',function(){
        $('.alert-box').fadeOut();
    })
    var b2 = document.getElementById("cha2");
    b2.addEventListener('click',function(){
        $('.alert-box2').fadeOut();
        $("#erweima").attr('src','images/kong.png');
    })
    var b3 = document.getElementById("cha3");
    b3.addEventListener('click',function(){
        $('.alert-box3').fadeOut();
    })
    var alertbox = document.querySelector('.alert-box');
    window.addEventListener('click',function(e){
        if(e.target==alertbox){
            $('.alert-box').fadeOut();
        }
    })
    var alertbox2 = document.querySelector('.alert-box2');
    window.addEventListener('click',function(e){
        if(e.target==alertbox2){
            $('.alert-box2').fadeOut();
            $("#erweima").attr('src','images/kong.png');
        }
    })
    var alertbox3 = document.querySelector('.alert-box3');
    window.addEventListener('click',function(e){
        if(e.target==alertbox3){
            $('.alert-box3').fadeOut();
        }
    })
    function shouye(){
        window.location.href="shopping.html";
    }
</script>
</div>
</body>
</html>